<template>
  <template v-for="item in menuList" :key="item.menuId">
    <template v-if="!['/exam', '/train'].includes(item.path)">
      <a-menu-item
        v-if="!item.hasChildren"
        :key="item.path"
        :class="getIcon(item.path) ? `font-bold` : `font-normal`"
      >
        {{ item.menuName }}
      </a-menu-item>
      <a-sub-menu
        v-else
        :key="item.menuId"
        :class="getIcon(item.path) ? 'font-bold' : 'font-normal'"
      >
        <!-- <template #icon>
          <i
            v-if="getIcon(item.path)"
            :class="getIcon(item.path)"
            class="menu-icon"
          ></i>
        </template> -->
        <template #title>
          {{ item.menuName }}
        </template>
        <Menu :menuList="item.children"></Menu>
      </a-sub-menu>
    </template>
  </template>
</template>

<script lang="ts" setup>
import Menu from './Menu.vue'
defineProps({
  menuList: {
    type: Array<any>,
    default: () => []
  }
})

const iconList = [
  {
    path: '/systemConfig',
    icon: 'system-config'
  },
  {
    path: '/logManage',
    icon: 'log-manage'
  },
  {
    path: '/',
    icon: 'log-manage'
  }
]

const getIcon = (path: string) => {
  const arr = iconList.filter((item) => {
    return item.path === path
  })
  if (arr.length > 0) return arr[0].icon
  return ''
}
</script>

<style lang="less">
.layout-menu {
  overflow-y: auto;

  .menu-icon {
    display: inline-block;
    // margin-right: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    vertical-align: text-bottom;
  }

  .ai-visual-selected {
    padding: 0 1.25rem !important;
  }

  .ant-menu-item-selected.ai-visual-selected {
    // background: linear-gradient(-90deg, @primary-color 0%, #66a8ff 100%);

    .ant-menu-title-content {
      color: @primary-color;
      font-weight: bold;
    }
  }

  .menu-icon.system-config {
    background-image: url('@/assets/images/menu/system-config.png');
  }

  .menu-icon.log-manage {
    background-image: url('@/assets/images/menu/log-manage.png');
  }

  .font-bold {
    .ant-menu-title-content {
      font-weight: 400;
      font-size: 1rem;
      //   color: @primary-color;
    }
  }

  .ant-menu-item-selected.font-bold {
    .ant-menu-title-content {
      font-weight: bold;
      font-size: 1rem;
      //   color: @primary-color;
    }
  }

  .font-normal {
    .ant-menu-title-content {
      font-weight: normal;
    }
  }

  .ant-menu-submenu-title,
  .ant-menu-item-only-child {
    padding-right: 1.25rem !important;
    // padding-left: 1.25rem !important;
  }

  .ant-menu-sub.ant-menu-inline {
    background: @bg-color !important;
  }

  .ant-menu-inline.ant-menu-root .ant-menu-item,
  .ant-menu-inline.ant-menu-root .ant-menu-submenu-title {
    // padding-left: 1.875rem !important;
    font-size: 1rem;
    color: #000;
    font-weight: 400;
  }

  .ant-menu-sub.ant-menu-inline > .ant-menu-item,
  .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
    // padding-left: 3.125rem !important;
    height: 2.875rem !important;
    font-size: 16px;
    color: #707479;
    font-weight: bold;
    line-height: 2.875rem !important;
  }

  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background: #e9f2fe !important;

    .ant-menu-title-content {
      color: @primary-color !important;
      font-weight: bold;
    }
  }

  .ant-menu-submenu-selected {
    // background: linear-gradient(-90deg, @primary-color 0%, #66a8ff 100%);

    .menu-icon.system-config {
      background-image: url('@/assets/images/menu/system-config-selected.png');
    }

    .menu-icon.log-manage {
      background-image: url('@/assets/images/menu/log-manage-selected.png');
    }

    .ant-menu-submenu-title {
      .ant-menu-title-content {
        font-weight: bold;
        // color: @bg-color;
      }
    }
  }

  /* stylelint-disable-next-line no-duplicate-selectors */
  .ant-menu-inline,
  .ant-menu-item,
  .ant-menu-inline,
  .ant-menu-submenu-title {
    // width: 100% !important;
  }
}
</style>
